
<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      title="状态变更"
      width="20%"
      align-center
      class="dialogStyle"
    >
      <div style="text-align: center">
        <el-dropdown @command="handleCommand" trigger="click">
          <el-button type="primary">
            {{ state.title }}<svg-icon icon-class="down-icon" />
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="item in state.list"
                :key="item.code"
                :command="item"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="state.centerDialogVisible = false" class="button_view">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElDialog, ElDropdown, ElDropdownItem } from 'element-plus'

let state = reactive({
  centerDialogVisible: false,
  title: '状态',
  list: [
    {
      name: '施工中',
      code: '0'
    },
    {
      name: '竣工',
      code: '1'
    },
    {
      name: '其他',
      code: '2'
    },
    {
      name: '停工',
      code: '3'
    },
    {
      name: '未开工',
      code: '4'
    }
  ]
})
const handleCommand = (item) => {
  state.title = item.name
}
defineExpose({
  state
})
</script>
<style lang="scss" scoped>
.el-dialog__body .el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.el-dialog__body {
  .el-button  {
  width: 150px;
}
}

</style>
<style lang="scss" scoped>
@import '@/assets/general_style/dialog.scss';
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
